<!--
 描述: 客户分布
 作者: Jack Chen
 日期: 2020-05-09
-->

<template>
  <div class="distribution-container">
    <div class="chart" id="chart_right2"></div>
  </div>
</template>

<script>
import { getsystem } from '@/api/echarts'
export default {

  name: "distribution",
  data() {
    return {
      normalEquipment: 0,
      alarmEquipment: 0,
      offlineEquipment: 0,
      faultEquipment: 0,
      unableEquipment: 0
    }
  },
  created() {
    getsystem().then(res => {
      // console.log(res, '分布图');
      this.normalEquipment = res.msg.normalEquipment
      // console.log(this.normalEquipment, '正常设备');
      this.alarmEquipment = res.msg.alarmEquipment
      this.offlineEquipment = res.msg.offlineEquipment
      this.faultEquipment = res.msg.faultEquipment
      this.unableEquipment = res.msg.unableEquipment
      // 调用图表更新方法
    // this.getEchartRight2();
    })
  },
  mounted() {
  },
  methods: {
    getEchartRight2() {
      let myChart = echarts.init(document.getElementById('chart_right2'));
      let option = {
        color: [' #00FFBF', '#FF007F', '#8F00FF', '#FF6F61', '#DFFF00', '#FFAD05', '#4465fc'],
        tooltip: {  //当鼠标悬停在图表项上时显示
          trigger: 'item',  //表示工具提示触发的方式是鼠标悬停在具体的图表项上
          formatter: '{b} : {c} ({d}%)'  //{b}代表数据项名称 {c}代表数据值 {d}代表数据项占总量的百分比
        },
        polar: {},//配置极坐标系，通常用于雷达图、极坐标图等。这里是一个空对象，意味着将使用默认的极坐标系设置
        angleAxis: {
          interval: 1,  //表示刻度间隔是1
          type: 'category',//表示角度轴的数据类型是分类型（非数值型）
          data: [],//表示角度轴上的数据为空，需要根据实际数据填充
          z: 10,//表示角度轴的层叠顺序
          axisLine: {
            show: false,//表示不显示轴线
            lineStyle: { //表示不显示轴线
              color: '#0B4A6B',
              width: 5,
              type: 'solid'  //表示轴线的类型是实线
            },
          },
          axisLabel: {  //配置角度轴上的标签样式
            interval: 0,//表示每个标签都显示（间隔为0）
            show: true,//表示显示标签
            color: '#0B4A6B',
            margin: 8,//表示标签与轴线之间的距离
            fontSize: 16//表示标签的字体大小
          },
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#0B3E5E',
              width: 1,
              type: 'solid'
            },
          },
          axisLabel: {
            formatter: '{value} %',
            show: false,
            padding: [0, 0, 20, 0],
            color: '#0B3E5E',
            fontSize: 16
          },
          splitLine: {
            lineStyle: {
              color: '#0B3E5E',
              width: 2,
              type: "solid"
            }
          }
        },
        calculable: true,
        series: [{
          type: 'pie',
          radius: ['6%', '10%'],
          hoverAnimation: false,
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 50
            },
            emphasis: {
              show: false
            }
          },
          tooltip: {
            show: false
          },
          data: [{
            name: '',
            value: 0,
            itemStyle: {
              normal: {
                color: '#0B4A6B'
              }
            }
          }]
        }, {
          type: 'pie',//饼图
          radius: ['90%', '95%'],//控制外圆的
          hoverAnimation: false,//悬停动画
          labelLine: {
            normal: {
              show: false,
              length: 30,
              length2: 50
            },
            emphasis: {
              show: true
            }
          },
          tooltip: {
            show: false
          },
          data: [{
            name: '',
            value: 0,
            itemStyle: {
              normal: {
                color: '#0B4A6B'
              }
            }
          }]
        }, {
          stack: 'a',
          type: 'pie',
          radius: ['20%', '80%'], //内圈半径
          roseType: 'area',
          zlevel: 10,
          label: {
            normal: {
              show: true,
              formatter: '{b}',
              textStyle: {
                fontSize: 12,
              },
              position: 'outside'//标签将显示在图表项的外部
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: true,
              length: 15,
              length2: 50,
              lineStyle: {
                type: 'dotted'
              }
            },
            emphasis: {
              show: true
            }
          },
          data: [{
            value: this.normalEquipment,
            name: '正常设备'
          }, {
            value: this.alarmEquipment,
            name: '报警设备'
          }, {
            value: this.offlineEquipment,
            name: '离线设备'
          }, {
            value: this.faultEquipment,
            name: '故障设备'
          }, {
            value: this.unableEquipment,
            name: '未启用设备'
          }]
        }]
      }

      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {

  }
};
</script>

<style lang="scss" scoped>
.distribution-container {
  .chart {
    height: 3rem;
  }
}
</style>
